<template>
  <el-menu>
    <el-submenu index="1">
      <template slot='title'>{{menu.title||''}}</template>
      <el-menu-item-group v-for='(group,index) in menu.groups' :key="index" title=''>
        <!-- <template slot='title'>{{group.title}}</template> -->
        <div v-for='(item,idx) in group.items'>
          <el-menu-item  :index="index+'-'+idx" :key="idx" v-if='!(item.submenu&&item.submenu.length)'>{{item.name}}</el-menu-item>
          <el-submenu :index="index+'-'+idx" :key="idx" v-if='item.submenu&&item.submenu.length'>
            <template slot="title">{{item.name}}</template>
            <el-menu-item v-for='(submenu,inx) in item.submenu' :key='inx' :index="index+'-'+idx+'-'+inx">{{submenu.name}}</el-menu-item>
          </el-submenu>
        </div>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
import { Menu, MenuItem, Submenu, MenuItemGroup } from 'element-ui'
export default {
  name: 'AsideMenu',
  components: {
    'el-submenu': Submenu,
    'el-menu': Menu,
    'el-menu-item': MenuItem,
    'el-menu-item-group': MenuItemGroup
  },
  props: {
    menu: Object
  },
  data() {
    return {
      // menu: {
      //   title: 'menu',
      //   groups: [
      //     {
      //       title: '11',
      //       items: [
      //         { name: 'item1', submenu: [{ name: 'sub1' }, { name: 'sub2' }] },
      //         { name: 'item2' }
      //       ]
      //     },
      //     {
      //       title: 'group2',
      //       items: [{ name: 'item1' }]
      //     }
      //   ]
      // }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>
